<template>
  <div class="early-loading">
    <div v-for="item in earlyLoadList" :key="item.id" :class="'early-loading-item'+item.loading">
      <!-- <div v-if="item.loading===-1" class="seat" /> -->
      <i :class="getLoadingIcon(item.loading)" />
      {{ item.label }}
      <span class="explain">{{ item.explain }}</span>
      <!-- <i :class="getLoadingIcon(item.loading)" /> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      earlyLoadList: [
        {
          id: 1, label: '资产管理', loading: -1, time: 1, explain: '对资产管理过程中产生的风险点进行扫描'
        },
        {
          id: 2, label: '项目管理', loading: -1, time: 2, explain: '对项目管理过程中产生的风险点进行扫描'
        },
        {
          id: 3, label: '收支管理', loading: -1, time: 2, explain: '对收支管理过程中产生的风险点进行扫描'
        },
        {
          id: 4, label: '合同管理', loading: -1, time: 2, explain: '对合同管理过程中产生的风险点进行扫描'
        },
        {
          id: 5, label: '预算管理', loading: -1, time: 2, explain: '对预算管理过程中产生的风险点进行扫描'
        },
        {
          id: 6, label: '采购管理', loading: -1, time: 2, explain: '对采购管理过程中产生的风险点进行扫描'
        }
        // {
        //   id: 5, label: '风险列表', loading: 0, time: 2
        // }
      ]
    };
  },
  created() {
    console.log('created');
    this.loadingChange();
  },
  beforeDestroy() {
    console.log('beforeDestroy');
  },
  methods: {
    getLoadingIcon(num) {
      let iconStr;
      switch (num) {
        case -1:
          iconStr = '';
          break;
        case 0:
          iconStr = 'el-icon-loading';
          break;
        case 1:
          iconStr = 'el-icon-check';
          break;
        case 2:
          iconStr = 'el-icon-close';
          break;
      }
      return iconStr;
    },
    loadingChangePeomise(item) {
      return new Promise((resolve) => {
        const index = this.earlyLoadList.findIndex(i => i.id === item.id);
        this.earlyLoadList[index].loading = 0;
        setTimeout(() => {
          // const index = this.earlyLoadList.findIndex(i => i.id === item.id);
          const error = [5, 3].includes(item.id);
          error ? this.earlyLoadList[index].loading = 2 : this.earlyLoadList[index].loading = 1;
          // const obj = {
          //   id: item.id,
          //   label: this.earlyLoadList[index].label,
          //   loading: 2
          // };
          // if ([3, 4].includes(item.id)) {
          //   this.earlyLoadList.splice(index, 1, obj);
          // } else {
          //   obj.loading = 1;
          //   this.earlyLoadList.splice(index, 1, obj);
          // }

          resolve(item);
        }, item.time * 1000);
      });

      // return new Promise((resolve, reject) => {
      //   setTimeout(() => {
      //     resolve(`${item}毫秒后我成功啦！！！`);
      //   }, item);
      // });
    },
    async loadingChange() {
      await this.loadingChangePeomise(this.earlyLoadList[0]);
      await this.loadingChangePeomise(this.earlyLoadList[1]);
      await this.loadingChangePeomise(this.earlyLoadList[2]);
      await this.loadingChangePeomise(this.earlyLoadList[3]);
      await this.loadingChangePeomise(this.earlyLoadList[4]);
      await this.loadingChangePeomise(this.earlyLoadList[5]);
      // await this.loadingChangePeomise(this.earlyLoadList[4]);
      // const loadingList = [];
      // this.earlyLoadList.forEach(item => {
      //   loadingList.push(this.loadingChangePeomise(item));
      // });
      // for await (const x of loadingList) {
      //   console.log(x);
      // }
      // for (const i in loadingList) {
      //   await i;
      // }

      // const arr = [fn(3000), fn(1000), fn(1000), fn(2000), fn(500)];
      // for await (const x of arr) {
      //   console.log(x);
      // }
    }
  }
};
</script>
<style lang="scss" scoped>
.early-loading{
  font-size: 20px;
  padding: 30px 0;
  .seat{
    width: 32px;
    display:block;
  }
  .early-loading-item-1{
    padding-left: 26px;
  }
  .el-icon-check{
    color: green;
  }
  .el-icon-close{
    color: red;
  }
  .explain{
    font-size: 16px;
    color: grey;
    padding-left: 20px;
  }
}
</style>
